<template>
  <Transition name="slide-left">
    <div v-if="showContactMessage" class="settings page">
      <PageHead
        title="消息回复"
        :show-more="false"
        @back="showContactMessage = false"
      ></PageHead>
      <div v-if="showForm" class="form flex flex-s">
        <div class="textarea flex flex-col gr-4">
          <div class="flex justify-between form-head">
            <div>新建消息</div>
            <div @click="showForm = false">
              <img :src="closePng" width="18" />
            </div>
          </div>
          <div class="flex-1">
            <textarea v-model="textarea" class="w-100 h-100"></textarea>
          </div>
          <div class="flex flex-s">
            <div class="comfirm" @click="addMessage">
              <button>确定</button>
            </div>
          </div>
        </div>
      </div>
      <section class="p-16">
        <div class="user-info flex gc-8 align-center">
          <img width="24" :src="currentContact?.avatar" />
          <div>
            <div class="text-bold">{{ currentContact?.name }}</div>
          </div>
        </div>
        <div class="mb-8 text-999 flex justify-between align-center">
          <div>消息队列【{{ currentContact?.fakeMessage.length || 0 }}】</div>
          <div @click="showForm = true">
            <img :src="plusPng" width="18" />
          </div>
        </div>

        <div class="card">
          <ul class="flex flex-col gr-4">
            <li class="unstart flex align-center justify-between">
              <div class="flex align-center">
                <template v-if="messagePointer === -1">
                  <img :src="unStartPng" width="24" /> 未开始
                </template>
                <template v-else>
                  <img :src="playPng" width="24" />
                  读取到{{ messagePointer + 1 }}条
                </template>
              </div>
              <div>
                <div class="stop-button" @click="messagePointer = -1">重置</div>
              </div>
            </li>
            <li
              v-for="(item, key) in currentContact?.fakeMessage"
              :key="key"
              class="flex gc-4"
            >
              <div class="px-12">
                <div>第{{ key + 1 }}条</div>
              </div>
              <div class="message flex-1 pl-12">
                {{ item.text }}
              </div>

              <div class="pointer">
                <img
                  v-if="key === messagePointer"
                  :src="pointerPng"
                  width="24"
                />
              </div>
            </li>
          </ul>
        </div>
      </section>
    </div>
  </Transition>
</template>

<script setup lang="ts">
  import PageHead from '@/views/components/page-head/PageHead.vue';
  import plusPng from '@/assets/images/plus.png';
  import { ref } from 'vue';
  import pointerPng from '../asstes/pointer.png';
  import unStartPng from '../asstes/unstart.png';
  import playPng from '../asstes/play.png';
  import closePng from '../asstes/close.png';
  import { showContactMessage, messagePointer } from './settings';
  import { currentContact } from '../details/details';

  const textarea = ref('');

  const showForm = ref(false);

  const addMessage = () => {
    if (textarea.value) {
      currentContact.value?.fakeMessage.push({
        text: JSON.parse(JSON.stringify(textarea.value)),
      });
      textarea.value = '';
      showForm.value = false;
    }
  };
</script>

<style lang="scss" scoped>
  @import './style';
</style>
